import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx'
import { Browser, BrowserHrm } from 'weaver-mobile-page'
import { Select } from 'weaver-mobile'
import { withRouter } from 'react-router-dom';
import { TextareaItem, Icon, List, DatePicker, Tools } from 'weaver-mobile';
import '../../../style/goal/goalMainAdvancedSearch.less';
const FormItem = List.FormItem
const getLabel = Tools.getLabel;
const { DatePickerInput } = DatePicker;
@inject("goalMainAdvanceSearchStore", "goalMainStore")
@withRouter
@observer
class GoalMainAdvancedSearch extends React.Component {

    constructor(props) {
        super(props)
        this.state = { ...props }
    }

    componentWillMount() {
        const { searchname, orderby, orderbytype, principalid, enddate, enddate1, tagArray } = this.props.goalMainStore;
        const { changeGoalName, changePrincipal, changeEndDate, changeEndDateT, changeOrderby, changeOrderbytype, changeTagArray, reset } = this.props.goalMainAdvanceSearchStore;
        reset();
        changeGoalName(searchname)
        changePrincipal(principalid)
        changeEndDate(enddate)
        changeEndDateT(enddate1)
        changeOrderby(orderby)
        changeOrderbytype(orderbytype)
        changeTagArray(tagArray)
    }

    componentWillUnmount() {

    }

    onResetBtnClick = () => {
        const { reset } = this.props.goalMainAdvanceSearchStore
        const { resetSearchData } = this.props.goalMainStore;
        resetSearchData();
        reset()
    }

    onSearchBtnClick = () => {
        const { goalName, principal, endDate, endDateT, orderby, orderbytype, tagArray } = this.props.goalMainAdvanceSearchStore
        const { setCommonParams } = this.props.goalMainStore;
        let searchParmas = { goalName, principal, endDate, endDateT, orderby, orderbytype, tagArray }
        setCommonParams("", "", searchParmas);
        this.props.history.go(-1)
    }

    render() {
        const { goalMainHrmPrincipalBrowserStore, goalName, principal, endDate, endDateT, orderby, orderbytype, orderbyFieldOptions, orderbyTypeOptions,
            changeGoalName, changePrincipal, changeEndDate, changeEndDateT, changeOrderby, changeOrderbytype, tagBrowser, tagArray, changeTagArray } = this.props.goalMainAdvanceSearchStore

        return (
            <div className="workrelate_goal_serach workrelate-condition workrelate-goal-task-condition">
                <div className="advanced-search-wrapper">
                    <div className="search-content">
                        <List>
                            <FormItem
                                extra={<Icon size='xxs' type="editor" />}
                                label={getLabel(18238, '目标名称')}
                                line
                                noBorder
                                content={
                                    <TextareaItem
                                        value={goalName}
                                        placeholder={getLabel(83869, '请输入')}
                                        autoHeight
                                        onChange={v => changeGoalName(v)}
                                    />
                                }
                            />
                        </List>

                        <List>
                            <BrowserHrm
                                label={getLabel(16936, '责任人')}
                                store={goalMainHrmPrincipalBrowserStore}
                                hasAdvanceSerach
                                type={1}
                                isSingle={true}
                                onChange={(...arg) => {
                                    changePrincipal(arg[2].length > 0 ? [{ id: arg[2][0].id, name: arg[2][0].name }] : [])
                                }}
                                valueArray={principal}
                            />
                        </List>



                        <List className="border-none">
                            <FormItem
                                label={getLabel(741, '结束日期')}
                                noBorder
                                line
                                content={(<DatePickerInput
                                    placeholder={getLabel(83869, '请输入')}
                                    mode={"date"}
                                    value={endDate}
                                    onChange={v => changeEndDate(v)}
                                />)}
                            />
                        </List>
                        <List>
                            <FormItem
                                label="&nbsp;"
                                line
                                content={(<DatePickerInput
                                    placeholder={getLabel(83869, '请输入')}
                                    mode={"date"}
                                    value={endDateT}
                                    onChange={v => changeEndDateT(v)}

                                />)}
                            />
                        </List>

                        <List className="border-none">
                            <FormItem
                                noBorder
                                line
                                content={
                                    <Select
                                        className="common-select orderby-field-select"
                                        label={getLabel(129216, '排序方式')}
                                        value={orderby}
                                        options={orderbyFieldOptions}
                                        onChange={(key, showname) => {
                                            changeOrderby(key)
                                        }}
                                    />
                                }
                            />
                        </List>
                        <List>
                            <FormItem
                                noBorder
                                line
                                content={
                                    <Select
                                        className="common-select"
                                        label={getLabel(149, '默认')}
                                        value={orderbytype}
                                        options={orderbyTypeOptions}
                                        onChange={(key, showname) => {
                                            changeOrderbytype(key)
                                        }}
                                    />
                                }
                            />
                        </List>
                        <List>
                            <Browser
                                store={tagBrowser}
                                label={getLabel(516462, '目标标签')}
                                isSingle={true}
                                type={"wrltag"}
                                onChange={(...arg) => {
                                    changeTagArray(toJS(arg[2]))
                                }}
                                valueArray={tagArray}
                                viewAttr={2}
                            />
                        </List>
                    </div>

                    <div className="operation-btn-wrapper">
                        <span className="reset" onClick={this.onResetBtnClick}>{getLabel(2022, '重置')}</span>
                        <span className="search" onClick={this.onSearchBtnClick}>{getLabel(197, '搜索')}</span>
                    </div>
                </div>
            </div>

        )
    }
}

export default GoalMainAdvancedSearch;
